<!DOCTYPE html>
<html lang="en"><head>
        <meta charset="UTF-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <link rel="apple-touch-icon-precomposed" href="http://designmodo.com/wp-content/themes/designmodov2.1/images/mobile.png"/>
        <link rel="shortcut icon" href="http://designmodo.com/favicon.ico" />
        <title>Flat UI Pro - Bootstrap Design Framework - Designmodo</title>


<!-- / Yoast SEO Premium plugin. -->


		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>

<link rel='stylesheet' id='dm_style-css'  href='http://designmodo.com/wp-content/themes/designmodov2.1/style.css?t=1470886120' type='text/css' media='all' />

<link rel='stylesheet' id='dm_shop_flat_css-css'  href='http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/css/all.css' type='text/css' media='all' />



    <!-- End Visual Website Optimizer Asynchronous Code -->
</head>

<body class="single single-post postid-95873 single-format-standard post-flat">
    <section class="top-banner-slides banner-hidden stage-purple">
  <a href="http://designmodo.com/slides/">

    <div class="banner-layer stage1">
      <div class="banner-container">
        <span class="logo-slides"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 41" style="width:58px; height:48px;"><path d="M4,12h42c2.2,0,4,1.8,4,4v21c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V16C0,13.8,1.8,12,4,12z"/><path opacity="0.6" d="M45.5,9h-41C3.7,9,3,8.3,3,7.5v0C3,6.7,3.7,6,4.5,6h41C46.3,6,47,6.7,47,7.5v0C47,8.3,46.3,9,45.5,9z"/><path opacity="0.4" d="M7.5,0h35C43.3,0,44,0.7,44,1.5v0C44,2.3,43.3,3,42.5,3h-35C6.7,3,6,2.3,6,1.5v0C6,0.7,6.7,0,7.5,0z"/></svg></span>
        <span class="slides-text">Create a stunning website</span>
        <span class="slides-button">View</span>
      </div>
    </div>

    <div class="slide-shape-pink"></div>

    <div class="banner-layer stage2">
      <div class="banner-container">
        <span class="logo-slides"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 41" style="width:58px; height:48px;"><path d="M4,12h42c2.2,0,4,1.8,4,4v21c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V16C0,13.8,1.8,12,4,12z"/><path opacity="0.6" d="M45.5,9h-41C3.7,9,3,8.3,3,7.5v0C3,6.7,3.7,6,4.5,6h41C46.3,6,47,6.7,47,7.5v0C47,8.3,46.3,9,45.5,9z"/><path opacity="0.4" d="M7.5,0h35C43.3,0,44,0.7,44,1.5v0C44,2.3,43.3,3,42.5,3h-35C6.7,3,6,2.3,6,1.5v0C6,0.7,6.7,0,7.5,0z"/></svg></span>
        <span class="slides-text">With seamless animations and clean code</span>
        <span class="slides-button">View</span>
      </div>
    </div>

    <div class="slide-shape-blue"></div>

    <div class="banner-layer stage3">
      <div class="banner-container">
        <span class="logo-slides"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 41" style="width:58px; height:48px;"><path d="M4,12h42c2.2,0,4,1.8,4,4v21c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V16C0,13.8,1.8,12,4,12z"/><path opacity="0.6" d="M45.5,9h-41C3.7,9,3,8.3,3,7.5v0C3,6.7,3.7,6,4.5,6h41C46.3,6,47,6.7,47,7.5v0C47,8.3,46.3,9,45.5,9z"/><path opacity="0.4" d="M7.5,0h35C43.3,0,44,0.7,44,1.5v0C44,2.3,43.3,3,42.5,3h-35C6.7,3,6,2.3,6,1.5v0C6,0.7,6.7,0,7.5,0z"/></svg></span>
        <span class="slides-text">Slides Framework <span><svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><circle fill="#fff" cx="30" cy="30" r="30"/><path d="M25 39v-18l13 9-13 9z" fill="#0091F8"/></svg></span> Built to impress</span>
        <span class="slides-button">View</span>
      </div>
    </div>
  </a>
  <span class="close-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" enable-background="new 0 0 40 40">
      <line x1="15" y1="15" x2="25" y2="25" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10"/>
      <line x1="25" y1="15" x2="15" y2="25" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10"/>
      <circle class="circle" cx="20" cy="20" r="19" opacity="0" stroke="#000" stroke-width="2.5"  stroke-linecap="round" stroke-miterlimit="10" fill="none"/>
      <path d="M20 1c10.45 0 19 8.55 19 19s-8.55 19-19 19-19-8.55-19-19 8.55-19 19-19z" class="progress" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10" fill="none"/>
    </svg>
  </span>
</section>

<div id="upper-menu-mobile">
        <div id="page-menu-wrapper">
            <ul class="main no-js" style="border:none;box-shadow:none;">
                <li class="submenu-item">
                    <a href="javascript:void(0)" class="top-menu">
                        <span aria-hidden="true" class="icn_list"><label>Categories</label></span>
                    </a>
                    <div class="dropdown-menu categories">
                        <div class="menu-header"><ul id="menu-nav-menu" class="menu"><li id="menu-item-98952" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-98952"><a href="http://designmodo.com/design/">Design</a>
</li>
<li id="menu-item-18118" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-18118"><a href="http://designmodo.com/freebies/">Freebies</a>

</li>
<li id="menu-item-18124" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-18124"><a href="http://designmodo.com/tutorials/">Tutorials</a>

</li>
<li id="menu-item-46154" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-46154"><a href="http://designmodo.com/coding/">Coding</a></li>
<li id="menu-item-18120" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-18120"><a href="http://designmodo.com/inspiration/">Inspiration</a>
</li>
<li id="menu-item-18125" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-18125"><a href="http://designmodo.com/wordpress/">WordPress</a>

</li>
<li id="menu-item-79238" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-79238"><a href="http://designmodo.com/resources/">Resources</a>

</li>
</ul></div>                    </div>

                </li>
                <li><a href="http://designmodo.com/shop/" class="top-menu"><span aria-hidden="true" class="icn_cart"></span><label>Shop</label></a></li>
                <li class="submenu-item">
                    <a href="javascript:void(0)" class="top-menu">
                        <span aria-hidden="true" class="icn_search"></span>
                    </a>
                    <div class="dropdown-menu search">
                        <form id="search-mobile" action="http://designmodo.com/search/" method="get" target="_top">
                            <input type="text" name="q" class="search-input-mobile"/>
                            <input type="hidden" name="cx" value="partner-pub-8533961490949414:1129877839" />
                            <input type="hidden" name="cof" value="FORID:10" />
                            <input type="hidden" name="ie" value="UTF-8" />
                            <button type="submit" class="gobutton-mobile"><span aria-hidden="true" class="search_icon"></span></button>
                        </form>
                    </div>
                </li>
            </ul>
            <ul class="main right no-js">
                <li class="submenu-item">
                    <a href="javascript:void(0)" class="top-menu"><span aria-hidden="true" class="icn_follow"></span></a>

                    <div class="dropdown-menu follow">
                        <ul class="social">
                            <li>
                                <a href="http://feeds.feedburner.com/designmodo" title="" class="rss" rel="nofollow" target="_blank"><span aria-hidden="true" class="icn_rss"></span>RSS</a>
                            </li>
                            <li>
                                <a href="http://www.twitter.com/designmodo" title="" class="twitter" rel="nofollow" target="_blank"><span aria-hidden="true" class="icn_twitter"></span>Twitter</a></a>
                            </li>
                            <li>
                                <a href="http://www.facebook.com/designmodo" title="" class="facebook" rel="nofollow" target="_blank"><span aria-hidden="true" class="icn_facebook"></span>Facebook</a></a>
                            </li>
                            <li>
                                <a href="https://www.google.com/+DesignModo" title="" class="googleplus" rel="nofollow" target="_blank"><span aria-hidden="true" class="icn_googleplus"></span>Google+</a></a>
                            </li>
                            <li>
                                <a href="http://dribbble.com/designmodo" title="" class="dribbble" rel="nofollow" target="_blank"><span aria-hidden="true" class="icn_dribbble"></span>Dribbble</a>
                            </li>
                        </ul>
                        <div class="counter">274549 Subscribers & Followers</div>
                    </div>
                </li>


                    <li>
                        <a href="http://designmodo.com/my-account/" class="top-menu profile">
                            <span aria-hidden="true" class="icn_profile"></span>
                        </a>
                                    </li>
            </ul>
        </div>
    </div>

    <div id="upper-menu-container">
        <div id="page-menu-wrapper">
            <ul class="main left no-js">
                <li><a href="http://designmodo.com" class="top-menu home"><span aria-hidden="true" class="icn_logo"></span></a></li>
                <li class="submenu-item mobile-class">
                    <a href="#" class="top-menu">
                        Categories
                    </a>
                    <div class="dropdown-menu categories">
                        <div class="menu-header"><ul id="menu-nav-menu-1" class="menu"><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-98952"><a href="http://designmodo.com/design/">Design</a>

</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-18118"><a href="http://designmodo.com/freebies/">Freebies</a>

</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-18124"><a href="http://designmodo.com/tutorials/">Tutorials</a>

</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-46154"><a href="http://designmodo.com/coding/">Coding</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-18120"><a href="http://designmodo.com/inspiration/">Inspiration</a>

</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-18125"><a href="http://designmodo.com/wordpress/">WordPress</a>

</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-79238"><a href="http://designmodo.com/resources/">Resources</a>

</li>
</ul></div>                    </div>

                </li>
                <li><a href="http://designmodo.com/shop/" class="top-menu shop">Shop</a></li>

                <li class="mobile-class">
                    <div class="top-menu search">
                        <span class="label">Search<span class="cursor"></span></span>
                        <div class="formsearch">
                            <form id="search" action="http://designmodo.com/search/" method="get" target="_top">
                                <input type="text" name="q" class="search-input"/>
                                <input type="hidden" name="cx" value="partner-pub-8533961490949414:1129877839" />
                                <input type="hidden" name="cof" value="FORID:10" />
                                <input type="hidden" name="ie" value="UTF-8" />
                            </form>
                            <span class="gobutton"><span aria-hidden="true" class="search_icon"></span></span>
                        </div>
                    </div>
                </li>
            </ul>
            <ul style="float:right; right:-1px; position:relative;" class="main right no-js">
                <li class="submenu-item mobile-class">
                    <a href="#" class="top-menu">Follow us</a>

                </li>

                <li class="submenu-item mobile-class">
                                                <a href="http://designmodo.com/my-account/" class="top-menu profile">
                                                            <label>Sign In</label>
                        </a>
                                        </li>
                            </ul>
        </div>
    </div>

    <div id="header-wrapper">
        <div id="logo">
            <a class="main-logo" href="http://designmodo.com" title="Designmodo &#8211; Web Design Blog and Shop"></a>
        </div><!--end logo-->


    </div><!--end header-wrapper-->

    <div id="main-wrapper">




<div id="wrapper">

    <article id="main">
        <section class="promo-section">
            <div class="holder">
                <h1>Flat UI<span>Pro</span><dt>1.3.2</dt></h1>
                <p>Flat UI Pro is made on the basis of Twitter Bootstrap in a stunning flat-style, and the kit also includes a PSD version for designers.</p>
                <a href="#buy" class="btn" id="buynowbutton">Buy Now</a>
            </div>
        </section>
        <a id="all-elements" class="zoomify" target="_blank" href="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/1.Basic-Elements.png">
            <span class="elem-section">
                <span class="holder">
                    <span class="frame">
                        <h2>Useful Elements</h2>
                        <p>Flat UI Pro contains a huge number of basic components, icons and glyphs, which simplify your work when it comes to new projects. Don’t waste time reinventing the wheel, use Flat UI Pro to get started.</p>
                    </span>
                </span>
                <span class="elements-nav">
                    <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/all-elelemtns-thumb.png" alt="Basic Elements" width="552" height="408">
                    <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/eye-icon.png" class="icon">
                </span>
                <div class="buttonholder">
                    <span class="fakeButton">View All Elements (2 Mb)</span>
                </div>
            </span>
        </a>

        <section class="item-section">
            <div class="holder">
                <ul class="item-list">
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-1.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg width="100px" height="100px" id="loop" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <g id="circle">
                                <path fill="#E74C3C" d="M50,0c27.613,0,50,22.386,50,50s-22.387,50-50,50C22.386,100,0,77.614,0,50S22.386,0,50,0z"></path>
                                </g>
                                <path id="loop-sign" stroke-linejoin="round" fill="none" stroke="#F0C419" stroke-width="8" stroke-miterlimit="10" stroke-dashoffset="0" stroke-linecap="square" stroke-dasharray="216" d="M12.5,50.5c0,10,7,17,17,17c17,0,26-34,43-34c10,0,18,7,18,17s-8,17-18,17c-17,0-26-34-43-34C19.5,33.5,12.5,40.5,12.5,50.5z"></path>
                                <path id="shade" opacity="0.15" enable-background="new    " d="M45.938,50.5l5.047,6.516c0,0-2.141,2.797-3.5,4.25c0,0-3.621-3.552-5.746-5.583C43.047,54.281,45.938,50.5,45.938,50.5z"></path>
                                </svg>

                            </span>
                        </div>
                        <div class="frame">
                            <h3>A Lot of Components</h3>
                            <p>All the elements that are contained in Bootstrap, plus a few more.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-2.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg width="100px" height="100px" id="bootstrap" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <circle id="bootstrap-bg" fill-rule="evenodd" clip-rule="evenodd" fill="#4A245A" cx="50" cy="50" r="50"></circle>
                                <g id="lines">
                                <clipPath id="bootstrapmask">
                                    <path d="M49.952,99.999c-27.64,0-50.046-22.385-50.046-50C-0.094,22.385,22.312,0,49.952,0C77.594,0,100,22.385,100,49.999C100,77.614,77.594,99.999,49.952,99.999z"></path>
                                </clipPath>
                                <g id="all-lines" clip-path="url(#bootstrapmask)" opacity="0.2" transform="rotate(0,50,50)">
                                <line id="line-6-1" fill="none" stroke="#FFFFFF" stroke-width="2" x2="17" y2="31" x1="50" y1="12"></line>
                                <line id="line-6" fill="none" stroke="#FFFFFF" stroke-width="2" x1="17" y1="31" x2="-16" y2="12"></line>
                                <line id="line-5-6" fill="none" stroke="#FFFFFF" stroke-width="2" x2="17" y2="69" x1="17" y1="31" opacity="0"></line>
                                <line id="line-5" fill="none" stroke="#FFFFFF" stroke-width="2" x2="-16" y2="88" x1="17" y1="69"></line>
                                <line id="line-4-5" fill="none" stroke="#FFFFFF" stroke-width="2" x2="50" y2="88" x1="17" y1="69"></line>
                                <line id="line-4" fill="none" stroke="#FFFFFF" stroke-width="2" x2="50" y2="126" x1="50" y1="88" opacity="0"></line>
                                <line id="line-3-4" fill="none" stroke="#FFFFFF" stroke-width="2" x1="50" y1="88" x2="83" y2="69" opacity="0"></line>
                                <line id="line-3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="83" y1="69" x2="116" y2="88"></line>
                                <line id="line-2-3" fill="none" stroke="#FFFFFF" stroke-width="2" x1="83" y1="69" x2="83" y2="31"></line>
                                <line id="line-2" fill="none" stroke="#FFFFFF" stroke-width="2" x1="83" y1="31" x2="116" y2="12"></line>
                                <line id="line-1-2" fill="none" stroke="#FFFFFF" stroke-width="2" x1="83" y1="31" x2="50" y2="12"></line>
                                <line id="line-1" fill="none" stroke="#FFFFFF" stroke-width="2" x1="50" y1="12" x2="50" y2="-33"></line>
                                <circle id="circle-3-child" fill-rule="evenodd" fill="#FFFFFF" cx="83" cy="69" r="4"></circle>
                                <circle id="circle-3" fill-rule="evenodd" fill="#4A245A" cx="83" cy="69" r="2"></circle>
                                <circle id="circle-4-child" fill-rule="evenodd" fill="#FFFFFF" cx="50" cy="88" r="4"></circle>
                                <circle id="circle-4" fill-rule="evenodd" fill="#4A245A" cx="50" cy="88" r="2"></circle>
                                <circle id="circle-5-child" fill-rule="evenodd" fill="#ffffff" cx="17" cy="69" r="4"></circle>
                                <circle id="circle-5" fill-rule="evenodd" fill="#4A245A" cx="17" cy="69" r="2"></circle>
                                <circle id="circle-6-child" fill-rule="evenodd" fill="#ffffff" cx="17" cy="31" r="4"></circle>
                                <circle id="circle-6" fill-rule="evenodd" fill="#4A245A" cx="17" cy="31" r="2"></circle>
                                <circle id="circle-1-child" fill-rule="evenodd" fill="#ffffff" cx="50" cy="12" r="4"></circle>
                                <circle id="circle-1" fill-rule="evenodd" fill="#4A245A" cx="50" cy="12" r="2"></circle>
                                <circle id="circle-2-child" fill-rule="evenodd" fill="#ffffff" cx="83" cy="31" r="4"></circle>
                                <circle id="circle-2" fill-rule="evenodd" fill="#4A245A" cx="83" cy="31" r="2"></circle>
                                </g>
                                <path id="b-letter" fill="#FFFFFF" d="M52.67,30.995c2.578,0,4.698,0.283,6.361,0.85c1.927,0.812,2.891,2.486,2.891,5.021c0,2.289-0.729,3.884-2.188,4.782c-1.457,0.898-3.354,1.347-5.69,1.347H40.963v-12H52.67z M54.745,53.006c2.403,0.023,4.271,0.342,5.597,0.953c2.379,1.091,3.567,3.098,3.567,6.02c0,3.455-1.228,5.791-3.681,7.014c-1.353,0.658-3.244,0.99-5.67,0.99H40.962V53.006H54.745z M56.541,22.006L30,22v54.994L54.751,77c2.783,0,5.362-0.247,7.741-0.745c2.378-0.497,4.439-1.418,6.189-2.761c1.551-1.169,2.844-2.612,3.879-4.327C74.188,66.579,75,63.657,75,60.398c0-3.159-0.711-5.847-2.134-8.061c-1.423-2.213-3.532-3.831-6.328-4.851c1.84-0.944,3.233-1.989,4.178-3.133c1.691-2.04,2.538-4.739,2.538-8.097c0-3.258-0.839-6.056-2.516-8.394C67.953,24.058,63.223,22.105,56.541,22.006L56.541,22.006z"></path>
                                </g></svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Bootstrap 3 Based</h3>
                            <p>HTML layout based on Bootstrap framework. Bootstrap is a trusted, reliable and proven tool for developers.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-3.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="responsive" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <g id="responsive-window" transform=" translate(0,0)">
                                <path id="window-body" fill="#35495E" d="M74,15H6c-3.313,0-6,2.686-6,6v73c0,3.313,2.687,6,6,6h68c3.314,0,6-2.687,6-6V21C80,17.686,77.314,15,74,15z"></path>
                                <rect id="shade" x="49" y="15" rx="5" fill-rule="evenodd" clip-rule="evenodd" fill="#000000" opacity="0.2" width="31" height="76" transform=" translate(0,0)" style="opacity: 0.2;"></rect>
                                <path id="window-bg" fill="#FFFFFF" d="M76,93c0,1.657-1.343,3-3,3H7c-1.657,0-3-1.343-3-3V32h72V93z"></path>
                                <circle id="close" fill-rule="evenodd" clip-rule="evenodd" fill="#D15527" cx="9" cy="24" r="3"></circle>
                                <circle id="hide" fill-rule="evenodd" clip-rule="evenodd" fill="#F19B2D" cx="17" cy="24" r="3"></circle>
                                <circle id="expand" fill-rule="evenodd" clip-rule="evenodd" fill="#53BB72" cx="25" cy="24" r="3"></circle>
                                <rect id="window-screen1" x="8" y="36" fill-rule="evenodd" clip-rule="evenodd" fill="#14A085" width="64" height="56"></rect>
                                <rect id="window-screen2" x="34" y="36" fill-rule="evenodd" clip-rule="evenodd" fill="#26B99A" width="38" height="56"></rect>
                                </g>
                                <g id="responsive-iphone" transform=" translate(0,0)">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#35495E" d="M94,0H58c-3.313,0-6,2.687-6,6v76.001c0,3.312,2.687,5.998,6,5.998h36c3.314,0,6-2.686,6-5.998V6C100,2.687,97.314,0,94,0z M96,74H56V14h40V74z"></path>
                                <rect id="iphone-bg" x="56" y="14" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" width="40" height="60"></rect>
                                <rect id="iphone-screen1" x="59" y="17" fill-rule="evenodd" clip-rule="evenodd" fill="#14A085" width="34" height="54"></rect>
                                <rect id="iphone-screen2" x="59" y="44" fill-rule="evenodd" clip-rule="evenodd" fill="#26B99A" width="34" height="27"></rect>
                                <path id="details-2" fill-rule="evenodd" clip-rule="evenodd" fill="#2C3D4F" d="M69.5,6h12C82.328,6,83,6.672,83,7.5C83,8.329,82.328,9,81.5,9h-12C68.672,9,68,8.329,68,7.5C68,6.672,68.672,6,69.5,6z"></path>
                                <path id="details-1" fill-rule="evenodd" clip-rule="evenodd" fill="#2C3D4F" d="M76,78.001c1.657,0,3,1.342,3,2.998c0,1.658-1.343,3-3,3c-1.656,0-3-1.342-3-3C73,79.343,74.344,78.001,76,78.001z"></path>
                                </g>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Responsive Layout</h3>
                            <p>Expand your audience. Create a website with full mobile device support.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-4.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg width="100px" height="100px" version="1.1" id="clock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <circle fill="#33495f" cx="50" cy="50" r="50"></circle>
                                <path fill="#FFFFFF" d="M50,10c22.093,0,40,17.909,40,40c0,22.091-17.906,40-40,40c-22.091,0-40-17.909-40-40C10,27.909,27.91,10,50,10z"></path>
                                <path fill="#DAD9D9" d="M50,10.015c-11.806,0-22.413,5.119-29.733,13.254C27.352,16.896,36.723,13.015,47,13.015c22.085,0,39.986,17.902,39.986,39.985c0,10.277-3.881,19.646-10.254,26.729C84.871,72.41,89.988,61.805,89.988,50C89.988,27.917,72.086,10.015,50,10.015z"></path>
                                <path fill="none" d="M45.972,42.544c3.918-2.287,8.928-0.93,11.189,3.03c2.262,3.963,0.92,9.027-2.998,11.314c-3.918,2.286-8.928,0.93-11.189-3.031C40.713,49.896,42.054,44.832,45.972,42.544z"></path>
                                <path transform="rotate(315,50,50)" id="hrs" fill="#33495f" d="M46,27c0-2.209,1.791-4,4-4l0,0c2.209,0,4,1.791,4,4v19c0,2.209-1.791,4-4,4l0,0c-2.209,0-4-1.791-4-4V27z"></path>
                                <path transform="rotate(90,50,50)" id="min" fill="#33495f" d="M49.996,19.988C51.652,19.99,52.998,21.209,53,23v24c0,1.789-1.333,3.002-2.988,3c-1.658-0.002-3.01-1.209-3.012-3V23C46.999,21.21,48.34,19.986,49.996,19.988z"></path>
                                <circle fill="#33495f" cx="50" cy="50" r="8"></circle>
                                <path transform="rotate(225,50,50)" id="sec" fill="#E44D41" d="M52,24c0-1.104-0.896-2-2-2l0,0c-1.104,0-2,0.896-2,2v26c0,1.104,0.896,2,2,2l0,0c1.104,0,2-0.896,2-2V24z"></path>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Save Time</h3>
                            <p>Generate new ideas; design new projects. Spend your time creating, not building basic parts.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-5.png" width="117px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="retina" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="117px" height="104px" viewBox="0 0 117 104" enable-background="new 0 0 117 104" xml:space="preserve">
                                <circle fill="#26B99A" cx="50" cy="50" r="50"></circle>
                                <path id="glyph" fill="#FFFFFF" d="M81.309,43.339L45.441,79.208c-0.731,0.731-1.924,0.731-2.651,0L22.504,58.71c-0.362-0.366-0.556-1.374-0.556-1.858s0.194-0.947,0.556-1.315l5.404-4.871c0.366-0.375,0.855-0.555,1.338-0.55c0.476,0.001,0.951,0.185,1.313,0.55L42.79,63.143c0.728,0.743,1.92,0.743,2.651,0l27.918-27.834c0.728-0.737,1.92-0.737,2.646,0l5.303,5.354C82.04,41.396,82.04,42.604,81.309,43.339z"></path>
                                <g id="lens" transform="translate(81,35)">
                                <circle cx="-3.75" cy="3" r="26" opacity="0.15"></circle>
                                <g id="glass">
                                <circle fill="#ECF0F1" cx="0.75" cy="-1" r="29"></circle>
                                <circle fill="#26B99A" cx="0.75" cy="-1" r="26"></circle>
                                <clipPath id="lensmask" transform="translate(163,70)">
                                    <circle id="asdasd" cx="-0.25" cy="-1" r="26"></circle>
                                </clipPath>
                                <path id="largeGlyph" transform="translate(-163,-70)" clip-path="url(#lensmask)" fill="#FFFFFF" d="M162.9,87.166l-71.843,71.737c-1.464,1.463-3.854,1.463-5.311,0l-10.618-10.701c-1.457-1.48-3.854-3.884-5.311-5.364l-24.705-25.922c-0.725-0.732-1.114-1.753-1.114-2.727c0-0.968,0.389-1.894,1.114-2.631l10.824-9.74c0.733-0.75,1.715-1.111,2.68-1.102c0.952,0.004,1.903,0.369,2.63,1.102l24.499,24.958c1.457,1.489,3.847,1.489,5.311,0l55.922-55.671c1.458-1.475,3.846-1.475,5.303,0L162.9,81.811C164.366,83.281,164.366,85.697,162.9,87.166z"></path>
                                </g>
                                </g>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Retina Ready</h3>
                            <p>Each element is made with vector-based shapes, so they work at any size. You can even print a billboard.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-6.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="swatches" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <g id="pen-1" transform="rotate(0,50,50)">
                                <path id="body-1" fill="#E54E42" d="M50,74.001V100h0.072c-0.023,0-0.049,0.002-0.072,0.002c-12.816-0.008-25.662-4.828-35.417-14.584C4.812,75.646-0.008,62.838,0,50c0.009-12.816,4.829-25.662,14.583-35.417l0,0L33,33c-4.682,4.683-6.996,10.849-7,17c-0.004,6.162,2.31,12.311,7,17C37.683,71.684,43.848,73.996,50,74.001z"></path>
                                <path id="outer-1" fill-opacity="0.15" fill="#000000" enable-background="new    " d="M50,92C26.804,92,8,73.195,8,50c0-11.598,4.701-22.098,12.302-29.699l-5.719-5.718C7.868,21.299,0,33.438,0,50c0,27.062,21.625,50,50,50V92z"></path>
                                <path id="inner-1" fill-opacity="0.15" fill="#FFFFFF" enable-background="new    " d="M32.928,67c-4.689-4.689-7.003-10.838-7-17c0.004-6.151,2.316-12.317,7-17l-5.627-5.627c-5.791,5.79-9.373,13.79-9.373,22.627c0,17.673,14.327,32,32,32v-7.999C43.776,73.996,37.612,71.684,32.928,67z"></path>
                                <path id="wood-1" fill="#EFC22D" d="M63,87L50.014,74.009V74c-0.003,0-0.005,0.001-0.008,0.001L50.005,74L50,74.001c-3.309,0.011-6.009,5.826-6.009,13c0,7.181,2.709,13.001,6.022,13.001V99.98L63,87z"></path>
                                <path id="stylus-1" fill="#2D3E4F" d="M58.758,82.757C57.672,83.843,57,85.343,57,87c0,1.656,0.672,3.156,1.757,4.242L63,87L58.758,82.757z"></path>
                                </g>
                                <g id="pen-2" transform="rotate(0,50,50)">
                                <path id="body-2" fill="#29BB9C" d="M50,26.001V0.002h-0.072C49.951,0.002,49.976,0,50,0c12.816,0.008,25.662,4.828,35.417,14.584c9.771,9.771,14.592,22.58,14.584,35.417c-0.009,12.817-4.829,25.663-14.584,35.418l0,0L66.999,67.002c4.683-4.682,6.996-10.85,7-17c0.004-6.162-2.312-12.31-7-17C62.316,28.319,56.15,26.006,50,26.001z"></path>
                                <path id="inner-2" fill-opacity="0.1" fill="#000000" enable-background="new    " d="M66.999,33.002c4.688,4.689,7.004,10.838,7,17c-0.004,6.15-2.317,12.318-7,17l5.627,5.627c5.791-5.789,9.373-13.789,9.373-22.627c0-17.672-14.326-32-32-32v7.999C56.15,26.006,62.316,28.319,66.999,33.002z"></path>
                                <path id="outer-2" fill-opacity="0.15" fill="#FFFFFF" enable-background="new    " d="M50.001,8.001c23.195,0,41.999,18.805,41.999,42C92,61.6,87.299,72.1,79.698,79.7l5.72,5.718C92.133,78.702,100,66.563,100,50.001c0-27.062-21.624-50-49.999-50V8.001z"></path>
                                <path id="wood-2" fill="#EFC22D" d="M37,13.002l12.986,12.991v0.009c0.003,0,0.006-0.001,0.008-0.001l0.001,0.001L50,26.001c3.309-0.011,6.008-5.826,6.008-13C56.008,5.821,53.299,0,49.986,0v0.021L37,13.002z"></path>
                                <path id="stylus-2" fill="#2D3E4F" d="M41.242,17.245C42.328,16.159,43,14.659,43,13.002c0-1.656-0.672-3.156-1.757-4.242L37,13.002L41.242,17.245z"></path>
                                </g>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Color Swatches</h3>
                            <p>It's easy to change the appearance of elements and switch colors using embedded color swatches.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-7.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="fittogether" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="104px" height="104px" viewBox="0 0 104 104" enable-background="new 0 0 104 104" xml:space="preserve">
                                <circle id="shadow" opacity="0.05" cx="50" cy="54" r="50"></circle>
                                <circle id="bg" fill="#34495E" cx="54" cy="50" r="50"></circle>
                                <g id="shape" transform="rotate(0,54,50)">
                                <path id="whitehalf" fill="#FFFFFF" d="M54,91c-22,0-41-18.355-41-41S32,9,54,9C54,32.5,54,71.25,54,91z" transform="rotate(0,54,50)" data="white"></path>
                                <path id="darkhalf" fill="#34495E" d="M54,9c22,0,41,18.355,41,41S76,91,54,91C54,67.5,54,28.75,54,9z" transform="rotate(0,54,50)"></path>
                                <circle id="whilelarge" fill="#FFFFFF" cx="54.5" cy="70.5" r="20.5"></circle>
                                <circle id="darksmall" fill="#34495E" cx="54.5" cy="70.5" r="8.5"></circle>
                                <circle id="darklarge" fill="#34495E" cx="53.5" cy="29.5" r="20.5"></circle>
                                <circle id="whitesmall" fill="#FFFFFF" cx="54" cy="29.5" r="8.5"></circle>
                                </g>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Perfect Matching</h3>
                            <p>Components are made using the same styles and match each other wonderfully.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-8.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="aligned" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <clipPath id="iconmask">
                                    <circle cx="50" cy="50" r="50"></circle>
                                </clipPath>
                                <g clip-path="url(#iconmask)">
                                <path id="bg" fill="#34495E" d="M100,50c0,6.67-1.306,13.093-3.676,18.999C61.5,68.999,32.5,69,3.677,69C1.306,63.094,0,56.67,0,50C0,22.386,22.386,0,50,0C77.613,0,100,22.386,100,50z"></path>
                                <g id="surface">
                                <rect x="-1" y="70" fill="#D7DBDE" width="102" height="31"></rect>
                                <path fill="#FFFFFF" d="M100,71v29H0V71H100 M102,69h-2H0h-2v2v29v2h2h100h2v-2V71V69L102,69z"></path>
                                </g>
                                <g id="finger">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#DF9274" d="M-22.758-33.75c8.363-8.362,21.921-8.362,30.284,0l66.203,66.203c8.362,8.363,8.362,21.921,0,30.284c-4.034,4.033-9.441,6.262-14.729,6.262c-5.673,0-11.227-1.934-15.556-6.262L-22.758-3.465C-31.121-11.828-31.121-25.387-22.758-33.75z"></path>
                                <path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M61.215,19.844l12.5,12.5c6.195,6.195,7.804,15.227,4.856,22.91L61.275,37.958C56.276,32.959,56.259,24.87,61.215,19.844z"></path>
                                <path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M46.456,14.131c-0.391,0.391-1.023,0.391-1.414,0c-0.391-0.39-0.391-1.022,0-1.415l4.502-4.5l1.414,1.414L46.456,14.131z M39.456,16.132c-0.391,0.391-1.023,0.391-1.414,0s-0.391-1.024,0-1.414l9.002-9.002l1.414,1.414L39.456,16.132z"></path>
                                </g>
                                </g>
                                </svg>
                            </span>
                        </div>
                        <div class="frame">
                            <h3>Grid-Based Design</h3>
                            <p>Designed with alignment on 940/12 column grid. Sharp icons and glyphs include pixel-alignment.</p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-9.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="spaceship" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <circle id="bg" fill="#33495F" cx="50" cy="50" r="50"></circle>
                                <g id="Stars" clip-path="url(#starmask)">
                                <path id="star0" opacity="0.2" fill="#f6f8f8" enable-background="new    " d="M91,4.5c2.55-0.45,4.051-1.95,4.5-4.5c0.45,2.55,1.951,4.05,4.5,4.5c-2.549,0.451-4.05,1.95-4.5,4.5C95.051,6.45,93.55,4.951,91,4.5z"></path>
                                <path id="star1" opacity="0.1" fill="#f6f8f8" enable-background="new    " d="M91,4.5c2.55-0.45,4.051-1.95,4.5-4.5c0.45,2.55,1.951,4.05,4.5,4.5c-2.549,0.451-4.05,1.95-4.5,4.5C95.051,6.45,93.55,4.951,91,4.5z"></path>
                                <path id="star2" opacity="0.1" fill="#f6f8f8" enable-background="new    " d="M91,4.5c2.55-0.45,4.051-1.95,4.5-4.5c0.45,2.55,1.951,4.05,4.5,4.5c-2.549,0.451-4.05,1.95-4.5,4.5C95.051,6.45,93.55,4.951,91,4.5z"></path>
                                </g>
                                <clipPath id="starmask">
                                    <circle cx="50" cy="50" r="50"></circle>
                                </clipPath>
                                <clipPath id="rocketmask2">
                                    <path id="rocketmask1" d="M100,50c0,27.614-22.387,50-50,50C22.386,100,0,77.614,0,50S22.386,0,50,0c14.117,0,50,0,50,0S100,36.503,100,50z"></path>
                                </clipPath>
                                <g id="rocket-maskgroup">
                                <g id="rocket-raw" clip-path="url(#rocketmask2)">
                                <path id="det7" fill="#E94B35" d="M100,0.1c-0.156,0.018-0.117,0.058-0.1-0.1C76.584,2.979,63.361,12.281,55.865,22.035c-0.268,0.349-0.528,0.698-0.782,1.047c-0.002,0.003-0.005,0.007-0.008,0.01C47.015,34.196,46.087,45.812,46,49h-1l-1,3l4,4l3-1v-1c1.152-0.021,3.741-0.111,7.066-0.773l0.002,0.002C58.797,53.047,59,53.305,59,57c0,4.062,0,6.609,0,9c0,1.809,0.943,2.497,1.945,1.494c2.423-2.428,3.003-3.023,8.5-8.528c4.16-4.167,4.676-6.595,2.957-11.059C83.953,41.369,96.432,27.888,100,0.1z"></path>
                                <path id="det6" fill="#C23824" d="M48,56l-4-4l1-3h2l4,4v2L48,56z M52,28c-1.718-0.69-2-1-4-1s-4.183,1.38-6.861,4.063c-4.254,4.259-4.85,4.839-8.516,8.508C31.425,40.771,33.263,41,36,41c5.233,0,9.297-0.125,10.791,1.42C48.764,44.46,52,28,52,28z"></path>
                                <path id="det5" fill="#C23824" d="M100,0C100.1,0,100,0,100,0c-0.639,4.973-1.566,9.579-2.721,13.678c-1.049-1.97-2.562-4.364-4.5-6.272c-2.151-2.12-4.812-3.632-6.826-4.585C91.979,1.091,96.783,0.412,100,0z"></path>
                                <path id="det4" opacity="0.3" fill="#FFFFFF" enable-background="new    " d="M72.402,47.907c1.719,4.463,1.312,6.788-2.854,10.954c-0.844,0.844-7.828,7.859-8.604,8.633C59.941,68.496,59.033,67.809,59,66c-0.01-0.521,0.003,0.021,0-0.652c3-3,9.689-8.938,11-11.348c0.768-1.411,0.352-3.654,0-5c-3.312,1.76-11.516,4.094-11.932,4.229l0,0C54.906,53.875,52.467,53.943,51,54v-0.656c0,0,29.975-9.663,49-53.344c0.014,0-0.064,0.008,0,0C96.406,28.047,83.953,41.369,72.402,47.907z"></path>
                                <g id="det3">
                                <path fill="#FFFFFF" d="M77.5,28c-3.584,0-6.5-2.916-6.5-6.5s2.916-6.5,6.5-6.5s6.5,2.916,6.5,6.5S81.084,28,77.5,28z"></path>
                                <path fill="#C23824" d="M77.5,16c3.037,0,5.5,2.462,5.5,5.5S80.537,27,77.5,27S72,24.538,72,21.5S74.463,16,77.5,16 M77.5,14c-4.137,0-7.5,3.364-7.5,7.5s3.363,7.5,7.5,7.5s7.5-3.364,7.5-7.5S81.637,14,77.5,14L77.5,14z"></path>
                                </g>
                                <path id="det2" fill="#D7DCDE" d="M44,52l4,4L13,92l-6-6L44,52z"></path>
                                <path id="det1" fill="#F7F7F7" d="M43.875,52l2,2L7.5,91.5l-3-3L43.875,52z"></path>
                                </g>
                                </g>
                                </svg>

                            </span>
                        </div>
                        <div class="frame">
                            <h3>Extremely Light &amp; Fast</h3>
                            <p>Light and clean code installs with ease and is only few kilobytes. </p>
                        </div>
                    </li>
                    <li style="opacity: 1;">
                        <div class="visual">
                            <img src="http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/ico-10.png" width="100px" alt="image description" class="nosvg">
                            <span class="svg">
                                <svg version="1.1" id="freefont" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                                <clipPath id="circlemask">
                                    <circle cx="50" cy="50" r="50" id="groupmask"></circle>
                                </clipPath>
                                <circle id="bg" fill="#D7DBDE" cx="50" cy="50" r="50"></circle>
                                <g clip-path="url(#circlemask)" id="group">
                                <polygon id="shadow" fill-rule="evenodd" clip-rule="evenodd" fill="#BDC3C7" points="10.167,147.834 79,79 21,21 -52,94 "></polygon>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M-47.5,80c-3.033,0-5.5-2.468-5.5-5.5v-49c0-3.033,2.467-5.5,5.5-5.5h49C4.533,20,7,22.467,7,25.5v49C7,77.532,4.533,80,1.5,80H-47.5z"></path>
                                <path fill="#8B9298" d="M1.25,21C3.735,21,6,23.015,6,25.5v49C6,76.985,3.985,79,1.5,79h-49c-2.485,0-4.5-2.015-4.5-4.5v-49c0-2.485,2.015-4.5,4.5-4.5H1 M1.5,19h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49C5.084,81,8,78.084,8,74.5v-49C8,21.916,5.084,19,1.5,19L1.5,19z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M62.5,8C59.468,8,57,5.533,57,2.5v-49c0-3.033,2.468-5.5,5.5-5.5h49c3.032,0,5.5,2.467,5.5,5.5v49c0,3.033-2.468,5.5-5.5,5.5H62.5z"></path>
                                <path fill="#8B9298" d="M111.25-51c2.485,0,4.75,2.015,4.75,4.5v49c0,2.485-2.015,4.5-4.5,4.5h-49C60.015,7,58,4.985,58,2.5v-49c0-2.485,2.015-4.5,4.5-4.5H111 M111.5-53h-49c-3.584,0-6.5,2.916-6.5,6.5v49C56,6.084,58.916,9,62.5,9h49c3.584,0,6.5-2.916,6.5-6.5v-49C118-50.084,115.084-53,111.5-53L111.5-53z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M-11.5,8C-14.533,8-17,5.533-17,2.5v-49c0-3.033,2.467-5.5,5.5-5.5h49c3.033,0,5.5,2.467,5.5,5.5v49C43,5.533,40.533,8,37.5,8H-11.5z"></path>
                                <path fill="#8B9298" d="M37.25-51c2.485,0,4.75,2.015,4.75,4.5v49C42,4.985,39.985,7,37.5,7h-49C-13.985,7-16,4.985-16,2.5v-49c0-2.485,2.015-4.5,4.5-4.5H37 M37.5-53h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49C41.084,9,44,6.084,44,2.5v-49C44-50.084,41.084-53,37.5-53L37.5-53z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M62.5,152c-3.032,0-5.5-2.468-5.5-5.5v-49c0-3.032,2.468-5.5,5.5-5.5h49c3.032,0,5.5,2.468,5.5,5.5v49c0,3.032-2.468,5.5-5.5,5.5H62.5z"></path>
                                <path fill="#8B9298" d="M111.25,93c2.485,0,4.75,2.015,4.75,4.5v49c0,2.485-2.015,4.5-4.5,4.5h-49c-2.485,0-4.5-2.015-4.5-4.5v-49c0-2.485,2.015-4.5,4.5-4.5H111 M111.5,91h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49c3.584,0,6.5-2.916,6.5-6.5v-49C118,93.916,115.084,91,111.5,91L111.5,91z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M-11.5,152c-3.033,0-5.5-2.468-5.5-5.5v-49c0-3.032,2.467-5.5,5.5-5.5h49c3.033,0,5.5,2.468,5.5,5.5v49c0,3.032-2.467,5.5-5.5,5.5H-11.5z"></path>
                                <path fill="#8B9298" d="M37.25,93c2.485,0,4.75,2.015,4.75,4.5v49c0,2.485-2.015,4.5-4.5,4.5h-49c-2.485,0-4.5-2.015-4.5-4.5v-49c0-2.485,2.015-4.5,4.5-4.5H37 M37.5,91h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49c3.584,0,6.5-2.916,6.5-6.5v-49C44,93.916,41.084,91,37.5,91L37.5,91z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M98.5,80c-3.032,0-5.5-2.468-5.5-5.5v-49c0-3.033,2.468-5.5,5.5-5.5h49c3.032,0,5.5,2.467,5.5,5.5v49c0,3.032-2.468,5.5-5.5,5.5H98.5z"></path>
                                <path fill="#8B9298" d="M147.25,21c2.485,0,4.75,2.015,4.75,4.5v49c0,2.485-2.015,4.5-4.5,4.5h-49c-2.485,0-4.5-2.015-4.5-4.5v-49c0-2.485,2.015-4.5,4.5-4.5H147 M147.5,19h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49c3.584,0,6.5-2.916,6.5-6.5v-49C154,21.916,151.084,19,147.5,19L147.5,19z"></path>
                                <g id="button">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#ECF0F1" d="M25.5,80c-3.033,0-5.5-2.468-5.5-5.5v-49c0-3.033,2.467-5.5,5.5-5.5h49c3.032,0,5.5,2.467,5.5,5.5v49c0,3.032-2.468,5.5-5.5,5.5H25.5z"></path>
                                <path id="buttonstroke" fill="#8B9298" d="M74.25,21c2.485,0,4.75,2.015,4.75,4.5v49c0,2.485-2.015,4.5-4.5,4.5h-49c-2.485,0-4.5-2.015-4.5-4.5v-49c0-2.485,2.015-4.5,4.5-4.5H74 M74.5,19h-49c-3.584,0-6.5,2.916-6.5,6.5v49c0,3.584,2.916,6.5,6.5,6.5h49c3.584,0,6.5-2.916,6.5-6.5v-49C81,21.916,78.084,19,74.5,19L74.5,19z"></path>
                                <g id="pimple">
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#E1E5E6" d="M59,69c0,1.104-0.896,2-2,2H43c-1.104,0-2-0.896-2-2l0,0c0-1.104,0.896-2,2-2h14C58.104,67,59,67.896,59,69L59,69z"></path>
                                <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M59,69H41l0,0c0-1.104,0.896-2,2-2h14C58.104,67,59,67.896,59,69L59,69z"></path>
                                </g>
                                <g id="letters">
                                <path id="symbol-o" opacity="0" fill="#00A184" d="M42.542,53.379c0.362,1.254,0.902,2.38,1.622,3.381c0.719,1,1.619,1.791,2.701,2.37c1.081,0.58,2.29,0.87,3.628,0.87c1.347,0,2.564-0.295,3.656-0.885c1.09-0.588,1.988-1.372,2.693-2.349c0.705-0.978,1.241-2.1,1.607-3.367C58.816,52.133,59,50.83,59,49.493c0-1.337-0.184-2.639-0.55-3.907c-0.366-1.267-0.905-2.392-1.614-3.374c-0.71-0.982-1.604-1.763-2.68-2.343C53.079,39.29,51.858,39,50.493,39c-1.356,0-2.565,0.288-3.628,0.863c-1.063,0.575-1.959,1.366-2.687,2.371c-0.729,1.005-1.274,2.132-1.636,3.381S42,48.156,42,49.493C42,50.83,42.181,52.126,42.542,53.379z M47.327,55.867c-0.835-0.738-1.435-1.678-1.8-2.818c-0.366-1.14-0.548-2.325-0.548-3.557c0-1.214,0.183-2.395,0.548-3.544c0.365-1.149,0.963-2.094,1.794-2.836S49.21,42,50.493,42c1.285,0,2.341,0.369,3.168,1.106c0.826,0.738,1.427,1.679,1.8,2.823c0.374,1.146,0.561,2.333,0.561,3.563c0,1.238-0.187,2.429-0.561,3.568c-0.373,1.141-0.976,2.078-1.806,2.812c-0.831,0.732-1.886,1.1-3.162,1.1C49.218,56.973,48.162,56.604,47.327,55.867z"></path>
                                <path id="symbol-t" opacity="0" fill="#00A184" d="M55.5,39h-10c-0.829,0-1.5,0.671-1.5,1.5s0.671,1.5,1.5,1.5H49v16.5c0,0.828,0.671,1.5,1.5,1.5c0.828,0,1.5-0.672,1.5-1.5V42h3.5c0.828,0,1.5-0.671,1.5-1.5S56.328,39,55.5,39z"></path>
                                <path id="symbol-f" fill="#00A184" d="M54.5,42c0.828,0,1.5-0.671,1.5-1.5S55.328,39,54.5,39h-7c-0.829,0-1.5,0.671-1.5,1.5v18c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5V51h4.5c0.828,0,1.5-0.672,1.5-1.5c0-0.829-0.672-1.5-1.5-1.5H49v-6H54.5z"></path>
                                <path id="symbol-n" opacity="0" fill="#00A184" d="M56.5,39c-0.828,0-1.5,0.671-1.5,1.5v13.046l-9.252-13.878h0C45.479,39.266,45.021,39,44.5,39c-0.829,0-1.5,0.671-1.5,1.5v18c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5V45.454l9.252,13.878h0.001C55.521,59.734,55.979,60,56.5,60c0.828,0,1.5-0.672,1.5-1.5v-18C58,39.671,57.328,39,56.5,39z"></path>
                                <path id="symbol-e" opacity="0" fill="#00A184" d="M53.5,51c0.828,0,1.5-0.672,1.5-1.5c0-0.829-0.672-1.5-1.5-1.5H49v-6h4.5c0.828,0,1.5-0.671,1.5-1.5S54.328,39,53.5,39h-6c-0.829,0-1.5,0.671-1.5,1.5v18c0,0.828,0.671,1.5,1.5,1.5h6c0.828,0,1.5-0.672,1.5-1.5S54.328,57,53.5,57H49v-6H53.5z"></path>
                                <path id="symbol-r" opacity="0" fill="#00A184" d="M50.883,51H51c3.313,0,6-2.687,6-6s-2.687-6-6-6h-5.5c-0.829,0-1.5,0.671-1.5,1.5v18c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-7.366l7.373,8.356c0.297,0.336,0.71,0.508,1.126,0.508c0.353,0,0.706-0.124,0.991-0.375c0.621-0.548,0.681-1.496,0.133-2.117L50.883,51z M47,42h4c2.209,0,3,0.791,3,3s-0.791,3-3,3h-4V42z"></path>
                                </g>
                                <path id="hl" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M74.5,21h-49c-1.76,0-3.268,1.02-4.007,2.493C22.099,23.188,22.774,23,23.5,23h49c2.485,0,4.5,2.015,4.5,4.5v49c0,0.726-0.188,1.4-0.492,2.008C77.979,77.768,79,76.26,79,74.5v-49C79,23.015,76.985,21,74.5,21z"></path>
                                </g>
                                </g>
                                <path id="shade" opacity="0.15" d="M50,0C22.386,0,0,22.386,0,50c0,0.335,0.019,0.666,0.025,1C0.56,24.955,21.827,4,48,4c26.509,0,48,21.491,48,48c0,26.172-20.954,47.44-47,47.975c0.334,0.007,0.665,0.025,1,0.025c27.614,0,50-22.387,50-50C100,22.386,77.614,0,50,0z"></path>
                                </svg>

                            </span>
                        </div>
                        <div class="frame">
                            <h3>Free Font</h3>
                            <p>No expensive fonts here. Let’s use open-source fonts.</p>
                        </div>
                    </li>
                </ul>
            </div>
        </section>






        <span class="share-section-cont"></span>
    </article>
</div>



<div style="clear:both;"></div>


<div style="clear:both;"></div>


    </div><!--end articles container-->
    <div style="clear:both;"></div>
    </div><!--end content-wrapper-->
    </div><!-- end main-wrapper -->

<div id="footer-wrapper">
    <div class="menu-footer-container"><ul id="menu-footer-menu" class="page-menu-wrapper-footer"><li id="menu-item-121332" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121332"><a href="http://designmodo.com/contact-us/">Contact Us</a></li>
<li id="menu-item-121329" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121329"><a href="http://designmodo.com/about/">About</a></li>
<li id="menu-item-121333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121333"><a href="http://designmodo.com/privacy-statement/">Privacy</a></li>
<li id="menu-item-121335" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121335"><a href="http://designmodo.com/terms-and-conditions/">Terms</a></li>
<li id="menu-item-102718" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-102718"><a href="http://journal.designmodo.com/" rel="nofollow" title="" target="_blank">Journal</a></li>
<li id="menu-item-121330" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121330"><a href="http://designmodo.com/advertise/">Advertise</a></li>
<li id="menu-item-121331" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121331"><a href="http://designmodo.com/affiliates/">Affiliates</a></li>
<li id="menu-item-121334" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121334"><a href="http://designmodo.com/subscribe/">Newsletter</a></li>
</ul></div>
    <ul id="footer-container-right">
        <li class="copyright">Copyright &copy; 2016  <a href="http://designmodo.com/" class="on" title="DesignModo">Designmodo</a>. All Rights Reserved.</li>
        <li class="copyright">Designmodo is a popular web design blog and shop.</li>
    </ul>
</div>


<!-- END Twitter Tracking -->
</body>
</html>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

 Served from: designmodo.com @ 2016-08-11 06:28:40 by W3 Total Cache -->
